<template>
  <div class="index-css">
    <div class="top-container">
      <mynav class="nav"></mynav>
      <div class="container top-title-container">
        <div class="row">
          <div class="col-12 col-md-6">
            <div class="title">K线图&nbsp;做空？&nbsp;做多？</div>
            <p>短线投资数据支持</p>
            <!-- <p>30分K线、60分K线、2时K线、4时K线、日K线、月K线</p> -->
          </div>
          <div class="col-12 col-md-6 w-100" style="height:363px;">
            <img src="/static/images/ͼ1.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="container dl-conatainer">
      <div class="row">
        <div class="col-12">
          <h3 class="content_title">
            玩法技巧<br />
            <small>多种玩法轻松掌握</small>
          </h3>
        </div>
        <div class="col-6 col-md-3">
          <dl>
            <a href="/playskill?type=1">
            <img src="/static/images/未标题-1_01_24.png" alt="新手入门" />
            <dt>新手入门</dt></a>
            <dd>图文并茂，助你快速掌握</dd>
          </dl>
        </div>
        <div class="col-6 col-md-3">
          <dl><a href="/playskill?type=2">
            <img src="/static/images/未标题-1_01_27.png" alt="交易提示" />
            <dt>交易提示 </dt></a>
            <dd>安全交易，拒绝诈骗</dd>
          </dl>
        </div>
        <div class="col-6 col-md-3">
          <dl><a href="/playskill?type=3">
            <img src="/static/images/未标题-1_01_30.png" alt="卷轴攻略" />
            <dt>卷轴攻略 </dt></a>
            <dd>最小投资，收益最大化</dd>
          </dl>
        </div>
        <div class="col-6 col-md-3">
          <dl><a href="/playskill?type=4">
            <img src="/static/images/未标题-1_01_32.png" alt="新手入门" />
            <dt>你问我答 </dt></a>
            <dd>百问百答，快速解决问题</dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="time-conatainer greyBg">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h3 class="content_title">
              区块链资讯<br />
              <small>最新资讯不会错过</small>
            </h3>
          </div>
          <div class="col-1">
            <div class="line"></div>
          </div>
          <div class="col-11">
            <ul class="list-unstyled">
               <router-link class="nav-link my-nav-link" v-for="(item, index) in tableData" :key='index'  :to="'/newsInfo/'+item.id" >
                  <li class="media">
                     <div class="time">{{item.createTime|formtTime}}</div>
                <div class="icon"></div>
                    <img
                      :src="item.image"
                      style="width: 50px; height: 50px"
                      class="mr-3"
                      :alt="item.title"
                    />
                    <div class="media-body">
                      <h5 class="mt-0 mb-1">{{item.title}}</h5>
                      {{item.summary}}
                    </div>
                  </li>
                </router-link>
            </ul>
          </div>
        </div>
      </div>
    </div>

   <div class="container dl-conatainer">
      <div class="row">

        <div class="col-12">
          <h3 class="content_title">
            广告宝分拥走势图<br />
            <small>资产走势</small>
          </h3>
        </div>
        <div class="col-12">
           <img src="../../static/images/guangggaobao.png" style="width:100%;margin:12px auto;"/>
        </div>
        <div class="col-6 col-md-3" v-for="(item, index) in guanggaobao" :key='index'>
           <router-link class="nav-link my-nav-link"   :to="'/advertisement'" style="color:#000">
            <dl>
              <dt><h1>{{item.readBonus}}</h1></dt>
              <dd>{{(new Date(item.eventTime).getMonth()+1)+'月'+new Date(item.eventTime).getDate()+'日'}}收益</dd>
            </dl>
          </router-link>
        </div>
      </div>
    </div>
	 <!--
    <div class="greyBg">
      <div class="container dl-conatainer">
       <div class="row">
        <div class="col-12">
          <h3 class="content_title">
            服务中心展示<br />
            <small>流程明确,按流程方便快捷</small>
          </h3>
        </div>
        <div class="col-6 col-md-3">
          <dl>
            <img src="/static/images/未标题-1_01_11.png" alt="新手入门" />
            <dt>服务一</dt>
            <dd>图文并茂，助你快速掌握</dd>
          </dl>
        </div>
        <div class="col-6 col-md-3">
          <dl>
            <img src="/static/images/未标题-1_01_13.png" alt="交易提示" />
            <dt>服务二</dt>
            <dd>安全交易，拒绝诈骗</dd>
          </dl>
        </div>
        <div class="col-6 col-md-3">
          <dl>
            <img src="/static/images/未标题-1_01_15.png" alt="卷轴攻略" />
            <dt>服务三</dt>
            <dd>最小投资，收益最大化</dd>
          </dl>
        </div>
        <div class="col-6 col-md-3">
          <dl>
            <img src="/static/images/未标题-1_01_17.png" alt="新手入门" />
            <dt>服务四</dt>
            <dd>百问百答，快速解决问题</dd>
          </dl>
        </div>
      </div>

    </div>
    </div> -->


    <div class="container dl-conatainer">
      <div class="row">
        <div class="col-12">
          <h3 class="content_title">
            行情预测<br />
            <small>消息层面分析,次日行情走势预估</small>
          </h3>
        </div>
        <div class="col-12">
           <img class="hqImg" src="/static/images/ͼ2.png" alt="行情预测">
        </div>
      </div>
    </div>

    <div class="bottom-container">
      <div class="container">
        <div class="row">
          <div class="col-4">
            <h1>桂花糖</h1>
          </div>
          <div class="col-24 col-md-18 bottom-nav">
              <ul>
              <li class="nav-item">
                <router-link to="/" class="nav-link my-nav-link">首页</router-link>
              </li>
              <li class="nav-item">
                <router-link to="/kline" class="nav-link my-nav-link">K线图</router-link>
              </li>
              <li class="nav-item">
                <router-link to="/mhpicture" class="nav-link my-nav-link">分时图</router-link>
              </li>
              <!-- <li class="nav-item">
                <router-link to="/servercenter" class="nav-link my-nav-link">服务中心展示</router-link>
              </li> -->
              <li class="nav-item">
                <router-link to="/playskill" class="nav-link my-nav-link">玩法技巧</router-link>
              </li>
              <li class="nav-item">
                <router-link to="/news" class="nav-link my-nav-link">区块链资讯</router-link>
              </li>
              <!-- <li class="nav-item">
                微信:88657429
              </li> -->
            </ul>
          </div>
        </div>
         <hr>
        <div style="">
           <div class="footer">
      本站提供的数据仅供参考，因网络延迟等原因,数据更新可能会有延迟，由此造成的后果自行承担　<br />
      <a>渝ICP备20005066</a>访问量：{{ accessCount }} 商务合作（微信）88657429 <br />
       友情链接:<a target="_blank" href="https://www.91666.cloud">GHT官方网站</a
      >&nbsp;&nbsp;<a target="_blank" href=" http://www.96qubu.com">QB学习</a>
    </div>
        </div>
      </div>

    </div>

  </div>
</template>
<script>
import mynav from "@/components/nav";
import { homeNews,getAccessCount,getAdvertisementIndex } from "@/api/service";
export default {
  name: "home",
  components: { mynav },
   filters: {
    formtTime: value=>{
      let date=new Date(value);
        return date.getHours()+":"+date.getMinutes();
    }
  },
  data() {
    return {
      accessCount: 0,
      guanggaobao:[],
      pageInfo: {
        currentPage: 1,
        size: 3,
        total: 0,
      },
      tableData: [{
        createTime:'2020-12-12',
        image:'/static/images/未标题-1_01_24.png',
        title:'标题',
        summary:'简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介'
      },{
        createTime:'2020-12-12',
        image:'/static/images/未标题-1_01_24.png',
        title:'标题',
        summary:'简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介'
      },{
        createTime:'2020-12-12',
        image:'/static/images/未标题-1_01_24.png',
        title:'标题',
        summary:'简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介'
      }],
    };
  },
  created(){
    getAccessCount({add:1}).then((res) => {
        if (res.status == 200) {
          this.accessCount = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg || "访问量请求失败",
          });
        }
      });

    homeNews({
        page: this.pageInfo.currentPage,
        size: this.pageInfo.size,
        category:'1',
        kind:'0'
      }).then((res) => {
        if(res.status==200){
        this.tableData = res.data.content;
        this.pageInfo.currentPage = res.data.page;
        this.pageInfo.total = res.data.total;
        this.pageInfo.size = res.data.size;
        }
      });
      let guanggaobao={
        // page: 1,
        // size: 3,
        // total: 0,
        //beginTime: this.dateFormat(new Date()),
        //endTime: this.dateFormat(new Date(new Date().getTime()-24*60*60*1000*64)),
      }
      getAdvertisementIndex(guanggaobao).then(res => {
        this.guanggaobao=[];
         this.guanggaobao=res.data;
        // res.data.forEach((item,index)=>{
        //   if(index>(res.data.length-5)){
        //     this.guanggaobao.push(item);
        //   }
        //   console.log(item,index);
        // })

      })

  },
  methods:{
    dateFormat:(args)=>{
          let fmt="YYYY-mm-dd HH:MM:SS"
          let ret;
          if(args){
            let  date=new Date(args)
               const opt = {
              "Y+": date.getFullYear().toString(),        // 年
              "m+": (date.getMonth() + 1).toString(),     // 月
              "d+": date.getDate().toString(),            // 日
              "H+": date.getHours().toString(),           // 时
              "M+": date.getMinutes().toString(),         // 分
              "S+": date.getSeconds().toString()          // 秒
          };
          for (let k in opt) {
              ret = new RegExp("(" + k + ")").exec(fmt);
              if (ret) {
                  fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
              };
          };
          return fmt;
          }else{
            return "";
          }
     },

  },

};
</script>
<style lang="less" scoped>
.nav{
  z-index: 2;
}
.top-container {
  width: 100%;
  background: url("/static/images/背景.png") no-repeat;
  background-size: 100%;
  min-height:665px;
  .top-title-container {
    color: #fff;
    text-align: left;
    .row {
      .title {
        margin: 30% auto 0 auto;
        font-size: 38px;
      }
      p {
        font-size: 16px;
      }
      img {
        width: 100%;
        margin: 15% auto;
      }
    }
  }
}
@media (max-width: 767.98px) {
  .top-container {
    background: rgba(65, 0, 137);
    min-height:300px;
    .top-title-container {
      //  text-align:center;
      .row {
        .title {
          font-size: 28px;
        }
        p {
          font-size: 14px;
        }
        img {
        margin: 3% auto;
      }
      }
    }
  }
}
.content_title {
  padding: 25px 0;
  small {
    color: #999;
    font-size: 12px;
  }
}
.dl-conatainer {
  margin: 25px auto;
  dl{
    padding:15px 0px;
    &:hover{
      border-radius:15px;
      box-shadow:1px 1px 16px 5px #f5f5f5;
    }
    dt{margin:15px auto 0px auto;}
    dd{margin:5px auto;}
  }
}
.greyBg{
  background:rgba(248,248,252);
  padding:25px 0px;
}
.time-conatainer {
  .line {
    border: 0px;
    height: 100%;
    background: #999;
    position: absolute;
    top: -0px;
    right: 10px;
    transform: scaleX(0.5);
    width: 1px;
  }
  .list-unstyled {
    text-align: left;
    .media {
      position: relative;
      padding:15px;
      .time {
        position: absolute;
        left: -80px;
        top: -13px;
      }
      .icon {
        position: absolute;
        background: #999;
        border: 0px;
        width: 10px;
        height: 10px;
        left: -40px;
        top:-9px;
        border-radius: 50%;
      }
       &:hover{
          background:#fff;
          .icon {
            background:#540a9b;
          }
      }
    }
  }
}
.hqImg{
  max-width:418px;
  width:80%;
}
.bottom-container{
  background:url("/static/images/bottom.jpeg") no-repeat;
  background-size:100%;
  width:100%;
  padding:8% 0px 2% 0px;
  color:#fff;
  .row{
    vertical-align:center;
      .bottom-nav{
      ul{
        li{
          list-style-type:none;
          display: inline-block;
          a{color:#fff}
        }
      }
    }
    hr{
      background:#f3f3f3;
      border:0px;
      width:100%;
      height:1px;
    }
  }
}
@media (max-width: 767.98px) {
  .bottom-container{
  background: rgba(65, 0, 137);
  background-size:100%;
  width:100%;
  padding:8% 0px 2% 0px;
  color:#fff;
  .row{
    vertical-align:center;
      .bottom-nav{
      ul{
        li{
          list-style-type:none;
          display: inline-block;
          a{color:#fff}
        }
      }
    }
    hr{
      background:#f3f3f3;
      border:0px;
      width:100%;
      height:1px;
    }
  }
}
}
</style>
